<template>
  <!-- 业务类型 -->
  <div class="portrait app-container">
    <a-button type="primary" @click="showAddModal">
      <template #icon>
        <icon-plus />
      </template>
      新建业务类型
    </a-button>
    <a-list :bordered="false" max-height="74vh">
      <a-list-item v-for="item in portraitList" :key="item.portraitId">
        <a-list-item-meta :title="item.portraitName" />
        <template #actions>
          <div class="operate">
            <img src="../../../assets/images/edit.png" @click="showEditModal(item)" alt="">
            <img src="../../../assets/images/del.png" @click="handelDel(item)" alt="">
          </div>
        </template>
      </a-list-item>
    </a-list>
  </div>
  <!--
建议手动关闭
使用 v-model:visible=""
记得失败时return false 阻止弹窗关闭
调用配套API done();
-->
  <a-modal :visible="visbible" hide-title simple width="470" @cancel="handelCloseAddAndEditModal" @ok="handleAddOk">
    <div class="model-content">
      <CustomTitle :title="isNew ? '新建业务类型' : '编辑业务类型'" />
      <a-form :model="form" ref="formRef" auto-label-width>
        <a-form-item label="业务类型" field="portraitName" :rules="[{ maxLength: 20, message: '长度不能超过20个字符' }, ...rules]">
          <a-input placeholder="请输入" v-model="form.portraitName" />
        </a-form-item>
      </a-form>
    </div>
  </a-modal>
  <a-modal :visible="isAlertModal" @ok="handleDelOk" @cancel="handelDelClose" okText="确定" cancelText="取消" width="400px"
    unmountOnClose :closable="false">
    <div class="modal-message">
      <div class="del-name">{{ delDetail.portraitName }}</div>
      <div class="del-tip">您确定要删除该业务类型吗?</div>
    </div>
  </a-modal>
</template>

<script setup lang="ts">
import CustomTitle from "@/components/CustomTitle/index.vue";
import { getPortraitList, updatePortrait, delPortrait } from "@/apis/system";
import type { CustomerProfilingItem } from "@/apis/system/type";
import { Message } from "@arco-design/web-vue";
import { getCurrentInstance } from "vue";

defineProps(["rules"]);

const { proxy } = getCurrentInstance();

const visbible = ref(false);
const isNew = ref(true);
const showAddModal = () => {
  visbible.value = true;
  isNew.value = true;
};
const showEditModal = (item: CustomerProfilingItem) => {
  if (!item || !item.portraitId) {
    return Message.error("请选择要编辑的业务类型");
  }
  isNew.value = false;
  form.value = { ...item };
  visbible.value = true;
};
const handelCloseAddAndEditModal = async () => {
  await nextTick();
  proxy.$refs.formRef.resetFields();
  form.value = { portraitName: "" };
  visbible.value = false;
};

const form = ref<CustomerProfilingItem>({
  portraitName: ""
});
const verifyForm = (): Promise<boolean> => {
  return new Promise(async resolve => {
    await nextTick();
    proxy.$refs.formRef.validate((error: any) => {
      resolve(error == void 0);
    });
  });
};
const handleAddOk = async () => {
  if (!(await verifyForm())) {
    return Message.error("请填写完整");
  }
  await updatePortrait(form.value);
  getList();
  handelCloseAddAndEditModal();
  Message.success("操作成功");
};

const isAlertModal = ref(false);
const delDetail = ref<CustomerProfilingItem>({});
const handelDel = (item: CustomerProfilingItem) => {
  delDetail.value = item;
  isAlertModal.value = true;
};
const handleDelOk = async () => {
  await delPortrait(delDetail.value.portraitId);
  getList();
  Message.success("删除成功");
  handelDelClose();
};
const handelDelClose = () => {
  delDetail.value = {};
  isAlertModal.value = false;
};

const portraitList = ref<CustomerProfilingItem[]>([]);
const getList = async () => {
  const { data } = await getPortraitList();
  portraitList.value = data || [];
};

getList();
</script>

<style scoped lang="scss">
.portrait {
  height: 100%;
  // display: flex;

  ::v-deep(.arco-list-wrapper) {
    width: 100%;
  }

  .operate {
    display: flex;
    gap: 10px;
    img{
      width: 16px;
      height: 16px;
    }
  }

  .add {
    cursor: pointer;
    padding: 13px 20px;

    ::v-deep(.arco-icon),
    span {
      margin-right: 8px;
      color: rgb(var(--primary-6));
    }
  }
}

.model-content {
  .title {
    display: flex;
    align-items: center;

    .circle {
      background: rgb(var(--primary-6));
      width: 6px;
      height: 6px;
      border-radius: 50%;
      margin-right: 8px;
    }

    .title-label {
      font-size: 18px;
    }
  }

  ::v-deep(.arco-form) {
    margin: 65px 0 50px;
  }
}

.modal-message {
  text-align: center;

  .del-name {
    width: 80%;
    margin: 12px auto;
    height: 60px;
    line-height: 60px;
    border: 1px solid #dcdfe6;
  }
}

// ::v-deep(.arco-scrollbar-container){
//     max-height: 80%;
//     overflow-y: scroll;
// }
</style>
